<template>
    <div class="text-center">
        <p>智联空间业务分布范围</p>
        <img src="./../assets/main.png" alt="">
        <div class="d-inline-block citylist">
            <div>湖北 鄂州</div>
            <div>湖南 长沙</div>
            <div>广西 南宁</div>
            <div>广东 深圳</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MainPage'
}
</script>

<style lang="scss" scoped>
    p{
        font-size:24px;
        color:#2874ed;
        width: 240px;
        margin: 0 auto;
        border-bottom: 2px solid;
        margin-bottom: 72px;
    }
    .citylist{
        div{
            padding-left: 30px;
            position: relative;
            top: 30px;
            &::before{
                content: '';
                display: inline-block;
                width:10px;
                height:10px;
                border-radius:100%;
                position: absolute;
                left: 0;
                top: 7px;
            }
            &:nth-child(1){
                &::before{ background:#ef3a3a; }
            }
            &:nth-child(2){
                &::before{ background:#ffb43a; }
            }
            &:nth-child(3){
                &::before{ background:#50e3c2; }
            }
            &:nth-child(4){
                &::before{ background:#ff8387; }
            }
        }
    }
</style>
